{extend name="public/base"/}
{block name="style"}
	<link  rel="stylesheet" type="text/css" href="__PUBLIC__/static/css/mbook/index.css" />
	<link  rel="stylesheet" type="text/css" href="__PUBLIC__/static/css/mbook/style.css" />
	<link  rel="stylesheet" type="text/css" href="__PUBLIC__/static/css/mbook/all_header.css" />
	<style>
	*{margin:0;padding:0;}
	body{
		background:#fafafa;
		max-width:768px;
		margin:auto
	}
	#main{
     background: #fff;
		padding-bottom: 10px;
	}
		.ranking{
			display: flex;
			width: 90%;
			margin: 20px auto;
			height: 120px;
			border-radius: 2px;
			position: relative;
		}
		.ranking-head{
			flex: 0.25;
			text-align: center;
			height: 120px;
			line-height: 120px;
		}
		.ranking-head h2{
			font-size: 120%;
		}
		.line-skew-left{
			transform: rotate(-5deg);
			-ms-transform: rotate(-5deg);
			-moz-transform: rotate(-5deg);
			-webkit-transform: rotate(-5deg);
			-o-transform: rotate(-5deg);
		}
		.line-skew-right{
			transform: rotate(5deg);
			-ms-transform: rotate(5deg);
			-moz-transform: rotate(5deg);
			-webkit-transform: rotate(5deg);
			-o-transform: rotate(5deg);
		}
		.ranking-list{
			flex: 0.75;
			padding: 12px 15px 12px 20px;
		}
		.charts{
			clear: both;
			margin: 0 auto;
		}
		.charts li{
			line-height: 32px;
			height: 32px;
		}
		.charts li a{
			color: #000;
			margin: 0 auto;
		}
		.charts li a span {
			width: 20px;
			height: 20px;
			line-height: 20px;
			margin-right: 8px;
			color: #fff;
			background: #C75A5A;
			text-align: center;
			display: inline-block;
			border-radius: 50%;
			font-size: 14px;
		}
		.charts li p{
			display: inline-block;
			font-size: 14px;
			color: #868686;
			/*overflow: hidden;*/
			/*text-overflow: ellipsis;*/
			/*display: -webkit-box;*/
			/*-webkit-box-orient: vertical;*/
			/*-webkit-line-clamp: 1;*/
		}
		.r_c1{
			border: 2px solid #ff4848;
			color:#ff4848;
			box-shadow: 0 0 10px #ac3131;
		}
		.r_c2{
			border: 2px solid #ffcd48;
			color: #ffcd48;
			box-shadow: 0 0 10px #ac9631;
		}
		.r_c3{
			border: 2px solid #66ff48;
			color: #66ff48;
			box-shadow: 0 0 10px #31ac34;
		}
		.r_c4{
			border: 2px solid #48f0ff;
			color: #48f0ff;
			box-shadow: 0 0 10px #31a7ac;
		}
		.r_c5{
			border: 2px solid #4869ff;
			color: #4869ff;
			box-shadow: 0 0 10px #3141ac;
		}
		.r_c6{
			border: 2px solid #ea48ff;
			color: #ea48ff;
			box-shadow: 0 0 10px #a931ac;
		}
		.l-c1{
			border-right: 1px solid #ff4848;
		}
		.l-c2{
			border-right: 2px solid #ffcd48;
		}
		.l-c3{
			border-right: 2px solid #66ff48;
		}
		.l-c4{
			border-right: 2px solid #48f0ff;
		}
		.l-c5{
			border-right: 2px solid #4869ff;
		}
		.l-c6{
			border-right: 2px solid #ea48ff;
		}
		.li_c1{
			background: #e91c32 !important;
		}
		.li_c2{
			background: #ffb85d!important;
		}
		.li_c3{
			background: #44B549!important;
		}
		.footer-pub{
			text-align: center;
			margin: auto;
			padding: 15px 0 20px 0;
		}
		.footer-pub a{
			border-right: 1px solid #4d4d4d;
			padding: 0 20px;
			font-size: 10px;
			color: #4d4d4d;
		}
	.link{
		position: absolute;
		top:0;
		left:0;
		width:100%;
		height:100%;
		z-index: 501;
	}
	</style>
{/block}

{block name="body"}
<div class="info_nav">
	<a href="javascript:history.back(-1)" class="icon"><i class="icon iconfont icon-jiantou1 font_28"></i></a>
	<span class="text">排行榜</span>
	<a href="/" class="icon">首页</a>
	<a href="{:url('books/booksfav')}" class="icon font-14">书架</a>
    <a href="{:url('user/index')}" class="icon-w45"> 
		<img src="http://q.qlogo.cn/qqapp/101376496/022418C8445A92F58AA8687491256075/100" />
	</a>
</div>
<div id="main">
	<div class="ranking r_c1">
		<div class="ranking-head">
			<h2>推荐榜</h2>
		</div>
		<div class="line-skew-left l-c1"></div>
		<div class="ranking-list">
			<ul class="charts">
				{volist name="recommend" id="vo"}
					<li><a  href="/books/{$vo.articleid}"><span>{$i}</span><p>{$vo.articlename}</p></a>
					</li>
				{/volist}
			</ul>
		</div>
		<a  href="{:url('books/toplist',array('type'=>'recommend'))}" class="link"></a>
	</div>
	<div class="ranking r_c2">
		<div class="ranking-list">
			<ul class="charts">
				{volist name="subscription" id="vo"}
					<li><a  href="/books/{$vo.articleid}"><span>{$i}</span><p>{$vo.articlename}</p></a>
					</li>
				{/volist}
			</ul>
		</div>
		<div class="line-skew-right l-c2"></div>
		<div class="ranking-head">
			<h2>订阅榜</h2>
		</div>
		<a  href="{:url('books/toplist',array('type'=>'subscription'))}" class="link"></a>
	</div>
	<div class="ranking r_c3">
		<div class="ranking-head">
			<h2>点击榜</h2>
		</div>
		<div class="line-skew-left l-c3"></div>
		<div class="ranking-list">
			<ul class="charts">
				{volist name="click" id="vo"}
					<li><a  href="/books/{$vo.articleid}"><span>{$i}</span><p>{$vo.articlename}</p></a>
					</li>
				{/volist}
			</ul>
		</div>
		<a  href="{:url('books/toplist',array('type'=>'click'))}" class="link"></a>
	</div>
	<div class="ranking r_c4">
		<div class="ranking-list">
			<ul class="charts">
				{volist name="collect" id="vo"}
					<li><a  href="/books/{$vo.articleid}"><span>{$i}</span><p>{$vo.articlename}</p></a>
					</li>
				{/volist}
			</ul>
		</div>
		<div class="line-skew-right l-c4"></div>
		<div class="ranking-head">
			<h2>收藏榜</h2>
		</div>
		<a  href="{:url('books/toplist',array('type'=>'collect'))}" class="link"></a>
	</div>
	<div class="ranking r_c5">
		<div class="ranking-head">
			<h2>完本榜</h2>
		</div>
		<div class="line-skew-left l-c5"></div>
		<div class="ranking-list">
			<ul class="charts">
				{volist name="finish" id="vo"}
					<li><a  href="/books/{$vo.articleid}"><span>{$i}</span><p>{$vo.articlename}</p></a>
					</li>
				{/volist}
			</ul>
		</div>
		<a  href="{:url('books/toplist',array('type'=>'finish'))}" class="link"></a>
	</div>
</div>
{/block}

{block name="script"}
	<script type="text/javascript" src="__PUBLIC__/static/js/jquery.min.js"></script>
	<script type="text/javascript" src="__PUBLIC__/static/js/com.js"></script>
	
	<script>
		$(function(){
			var charts = $(".charts");
			for(var i=0;i<charts.length;i++){
				var content = charts.eq(i).find("li");
				for(var j=0;j<content.length;j++){
					content.eq(0).find("span").addClass("li_c1");
					content.eq(1).find("span").addClass("li_c2");
					content.eq(2).find("span").addClass("li_c3");
					if(j>2){
						content.eq(j).hide()
					}
				}
			}
		})
	</script>
{/block}
